<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>宝宝</title>
    <style type="text/css">
        *{padding: 0; margin: 0;}
        body, html {height: 100%;}
        body {background-image: url("images/background.jpg"); background-size: 100% 100%;}

        #box {
            width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
        }
        #box img {
            width: 280px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white; /* Change this to the desired color */
            font-size: 16px; /* Adjust the font size if needed */
            background-color: transparent; /* Optional: background color for better visibility */
            text-align: center;
            padding: 5px;
            box-sizing: border-box;
        }
        #box div:nth-child(1) { transform: rotateY(0deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(2) { transform: rotateY(36deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(3) { transform: rotateY(72deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(4) { transform: rotateY(108deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(5) { transform: rotateY(144deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(6) { transform: rotateY(180deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(7) { transform: rotateY(216deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(8) { transform: rotateY(252deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(9) { transform: rotateY(288deg) translateZ(650px); text-rendering: auto; }
        #box div:nth-child(10) { transform: rotateY(324deg) translateZ(650px); text-rendering: auto; }
        @keyframes go {
            0% {transform: rotateX(0deg) rotateY(0deg);}
            25% {transform: rotateX(20deg) rotateY(180deg);}
            50% {transform: rotateX(0deg) rotateY(360deg);}
            75% {transform: rotateX(-20deg) rotateY(540deg);}
            100% {transform: rotateX(0deg) rotateY(720deg);}
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <img src="images/1.jpg" title="岳"/>
            <div class="overlay">宝宝1</div>
        </div>
        <div>
            <img src="images/2.jpg" title="和"/>
            <div class="overlay">宝宝2</div>
        </div>
        <div>
            <img src="images/3.jpg" title="震"/>
            <div class="overlay">宝宝3</div>
        </div>
        <div>
            <img src="images/4.jpg" title="零"/>
            <div class="overlay">宝宝4</div>
        </div>
        <div>
            <img src="images/5.jpg" title="八"/>
            <div class="overlay">宝宝5</div>
        </div>
        <div>
            <img src="images/6.jpg" title="YUE"/>
            <div class="overlay">宝宝6</div>
        </div>
        <div>
            <img src="images/7.jpg" title="AND"/>
            <div class="overlay">宝宝7</div>
        </div>
        <div>
            <img src="images/8.jpg" title="ZHEN"/>
            <div class="overlay">宝宝8</div>
        </div>
        <div>
            <img src="images/9.jpg" title="YANDZ"/>
            <div class="overlay">宝宝9</div>
        </div>
        <div>
            <img src="images/10.jpg" title="Yaz"/>
            <div class="overlay">宝宝10</div>
        </div>
    </div>

    <div class="hovertree"></div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.fireworks.js"></script>

    <audio id="bgm" src="bgm/huiyi.mp3" loop></audio>
    <!-- 直接嵌入的 JavaScript 代码 -->
    <script type="text/javascript">
        // 按钮点击事件监听
        // 播放背景音乐的函数
        function playBackgroundMusic() {
            var bgm = document.getElementById('bgm');
            bgm.play().catch(error => {
                console.log('Playback failed:', error);
            });
        }

        // 监听文档的点击事件以播放背景音乐
        document.addEventListener('click', function() {
            playBackgroundMusic();
        });

        // 初始化烟花效果
        $('.hovertree').fireworks({
            sound: true, // 启用声音效果
            opacity: 0.3, 
            width: '100%', 
            height: '100%' 
        });
    </script>
</body>
</html>
YUEANDZHEN
